import React, { Component, useState, useMemo, useEffect, useContext } from "react";
import { Pagination, Table } from "antd";
import "./style.less";
import BasePageStore from "../../stores/common/BasePageStore";
import { inject, observer, useObserver } from "mobx-react";
import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import PageContext, { CONTEXT_VALUE } from "../../components/pageContainer/PageContext";

const PaginationTable = (props) => {
  const { contextValue, setContextValue, handleSearch } = useContext(PageContext); // 数据共享

  /*-------------------------分页配置--start-----------------------*/
  // 默认的每页条数
  const DEFAULT_PAGE_SIZE = 50;
  const PAGE_SIZE_OPTIONS = [20, 50, 100, 200, 1000];

  // 页面跳转
  const onChange = (page, pageSize) => {
    // React Context 数据共享用
    const { pagination } = contextValue;
    pagination.current = page;
    setContextValue(Object.assign(contextValue, { pagination }));

    handleSearch();
  };

  // 每页显示条数变更
  const onShowSizeChange = (current, pageSize) => {
    // React Context 数据共享用
    const { pagination } = contextValue;
    pagination.pageSize = pageSize;
    setContextValue(Object.assign(contextValue, { pagination }));

    handleSearch();
  };

  const PAGINATION = {
    defaultPageSize: DEFAULT_PAGE_SIZE,
    pageSizeOptions: PAGE_SIZE_OPTIONS,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
    onChange,
    onShowSizeChange,
    ...contextValue.pagination
  };
  /*-------------------------分页配置--end-----------------------*/

  /*-------------------------表格配置--基础功能--start-----------------------*/
  // 遮罩配置
  // 监听全局遮罩
  const isLoading = useObserver(() => BasePageStore.isLoading);
  const LOADING = {
    tip: "加载中...",
    spinning: isLoading
  };

  // 表格序号
  const isOrder = props.isOrder ?? true; // 序号
  const getColumns = () => {
    const columns = [];
    if (isOrder)
      columns.push({
        title: "序号",
        width: 50,
        align: "center",
        render: (text, record, index) => `${index + 1}`
      });
    return [...columns, ...props.columns];
  };

  // 表格宽度、高度及滚动配置
  const getScroll = () => {

  };

  // 粘性表头配置
  const STICKY = {
    offsetHeader: 100
  };


  /*-------------------------表格配置--基础功能--end-----------------------*/

  /*-------------------------表格配置--行选中--start-----------------------*/
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 选中项发生变化时的回调
  const onSelectChange = (newSelectedRowKeys, selectedRows) => {
    setSelectedRowKeys(newSelectedRowKeys);

    // setContextValue(Object.assign(contextValue, {
    //   selectedRowKeys: newSelectedRowKeys
    // }));

    const { dataSource, fieldsValue, pagination } = contextValue;

    setContextValue({ dataSource, fieldsValue, pagination, selectedRowKeys: newSelectedRowKeys });
  };

  const isSelect = props.isSelect ?? true;

  // 行选择配置
  const rowSelection = isSelect ? {
    type: "checkbox",
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: (record) => ({
      // disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      // name: record.sbillID
    })
  } : null;

  /*-------------------------表格配置--行选中--end-----------------------*/

  /*-------------------------表格配置--嵌套表格--start-----------------------*/
  const expandable = () => {
    const expandedRowRender = props.expandedRowRender;
    if (!expandable) return {};

    return {
      expandedRowRender,
      defaultExpandedRowKeys: [0]
    };
  };
  /*-------------------------表格配置--嵌套表格--end-----------------------*/

  return (
    <div className="pagination_table_wrap">
      <ConfigProvider locale={zhCN}>
        <Table loading={LOADING} dataSource={props.dataSource} columns={getColumns()}
               scroll={{ y: 550 }} pagination={PAGINATION} bordered size="middle"
               rowSelection={rowSelection}
               title={props.title ?? null}
               rowKey={(record) => record[props.rowKey]}
               expandable={expandable()}
        />
      </ConfigProvider>
    </div>
  );
};

export default PaginationTable;
